<template>
  <a-layout class="full-height" >

    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <!-- <a-menu-item key="1">
          <PieChartOutlined />
          <span>数据分析</span>
        </a-menu-item> -->
        <a-menu-item key="2">
          <DesktopOutlined />
          <span><RouterLink to="/server"> 电脑信息</RouterLink></span>
    
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <UserOutlined />
              <span>学生管理</span>
            </span>
          </template>
          <a-menu-item key="3">
            <RouterLink to="/student">学生信息</RouterLink>
          </a-menu-item>
          <a-menu-item key="4">
            <RouterLink to="/breakTheRule">违纪信息</RouterLink>
          </a-menu-item>
          <a-menu-item key="5">
            <RouterLink to="/studentScore">学生成绩</RouterLink>
          </a-menu-item>
          <a-menu-item key="6">
            <RouterLink to="/socialPractice">社会实践</RouterLink>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item key="9">
          <FileOutlined />
          <span>文件</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>

      <a-layout-header class="layout-header" >
        <a-button class="logout"  @click="logout()" >退出登录</a-button>

      </a-layout-header>
      
      <a-layout-content class="layout-content">
        <a-breadcrumb class="breadcrumb">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <div class="content-box">
          <RouterView></RouterView>
        </div>
      </a-layout-content>
      <a-layout-footer class="layout-footer">
        Ant Design ©2024 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined,AntDesignOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { RouterLink, RouterView } from 'vue-router';

const collapsed = ref(false);
const selectedKeys = ref(['2']);
const logout=()=>{
  sessionStorage.removeItem('token')
  window.location.href='/login'
}
</script>

<style scoped >
.avatar{
  float: right;
  margin-right: 20px;
}
.full-height {
  min-height: 100vh;
}
.logout{
  float: right;
  height: 65px;
  border-radius: 5px;
  /* margin: 16px; */
  background: rgba(255, 255, 255, 0.3);

}
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.layout-header {
  background: #fff;
  padding: 0;
}

.layout-content {
  margin: 0 16px;
}

.breadcrumb {
  margin: 16px 0;
}

.content-box {
  background: #fff;
  min-height: 80vh;
}

.layout-footer {
  text-align: center;
}

.site-layout-background {
  background: #fff;
}

[data-theme='dark'] .site-layout-background {
  background: #141414;
}
</style>
